<template>
	<!-- 新增修改弹窗 -->
	<el-dialog v-model="dialog" :title="form.id ? '修改菜单' : '添加菜单'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
			<el-form-item label="菜单名称" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="上级菜单" prop="parentId">
						<el-tree-select v-model="form.parentId" :data="menuTree" check-strictly :props="defaultProps"
							:render-after-expand="false" node-key="id">
							<template #default="{ node, data }">
								{{ $t(node.label) }}</template>
						</el-tree-select>
					</el-form-item>
					<el-form-item label="菜单权限" v-if="form.type == '1'" prop="permission">
						<el-input v-model="form.permission"></el-input>
					</el-form-item>
					<el-form-item label="菜单icon" prop="icon" v-if="form.type == '0'">
						<IconSelector placeholder="请输入菜单图标" v-model="form.icon" type="all" />
					</el-form-item>
					<el-form-item label="外链状态" v-if="form.type == '0'" prop="outerStatus">
						<el-radio-group v-model="form.outerStatus">
							<el-radio label="0">否</el-radio>
							<el-radio label="1">是</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="菜单编码" v-if="form.type == '0'" prop="path">
						<el-input v-model="form.path"></el-input>
					</el-form-item>
					<el-form-item label="应用系统" prop="applicationKey">
						<el-select v-model="form.applicationKey" style="width: 100%">
							<el-option v-for="item in applicationKeys" :key="item.dictValue" :label="item.dictLabel"
								:value="item.dictValue" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="form.type">
							<el-radio label="0">菜单</el-radio>
							<el-radio label="1">按钮</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="菜单路径" v-if="form.type == '0'" prop="component">
						<el-input v-model="form.component"></el-input>
					</el-form-item>
					<el-form-item label="排序序号" prop="sort">
						<el-input-number v-model="form.sort" :min="0" :max="99999" controls-position="right" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" @click="submitForm(formRef)" :loading="loading">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, reactive, ref, toRefs } from 'vue';
import { addObj, editObj, getList, getById } from '/@/api/upms/menu';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
interface DataState {
	form: {
		id: string | undefined;
		name: string;
		type: string;
		icon: string;
		parentId: string;
		permission: string;
		outerStatus: string;
		path: string;
		component: string;
		applicationKey: string;
		sort: number;
		datatimes: Array<string>;
	};
	rules: object;
	menuTree: Array<any>;
	applicationKeys: Array<any>;
}
export default defineComponent({
	components: { IconSelector: defineAsyncComponent(() => import('/@/components/iconSelector/index.vue')) },
	emits: ['initPage'],
	setup(props, { emit }) {
		const data = reactive<DataState>({
			form: {
				id: undefined,
				name: '',
				type: '0',
				icon: '',
				parentId: '',
				permission: '',
				outerStatus: '',
				path: '',
				component: '',
				applicationKey: '',
				sort: 0,
				datatimes: [],
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入菜单名称',
						trigger: 'change',
					},
				],
				icon: [
					{
						required: true,
						message: '请选择icon图标',
						trigger: 'change',
					},
				],
				type: [
					{
						required: true,
						message: '请选择类型',
						trigger: 'change',
					},
				],
				parentId: [
					{
						required: true,
						message: '请选择上级菜单',
						trigger: 'change',
					},
				],
				permission: [
					{
						required: true,
						message: '请输入菜单权限',
						trigger: 'change',
					},
				],
				path: [
					{
						required: true,
						message: '请输入菜单编码',
						trigger: 'change',
					},
				],
				component: [
					{
						required: true,
						message: '请输入菜单路径',
						trigger: 'change',
					},
				],
				sort: [
					{
						required: true,
						message: '请输入排序序号',
						trigger: 'change',
					},
				],
			},
			menuTree: [],
			applicationKeys: [],
		});

		const dialog = ref(false);
		const loading = ref(false);
		const formRef = ref();
		const defaultProps = {
			children: 'children',
			label: 'name',
		};
		const initForm = (row: any | undefined) => {
			dialog.value = true;
			if (row && row.id) {
				getDetail(row.id);
			}
			getTreeSelect();
		};
		const getDetail = (id: string) => {
			loading.value = true;
			// 修改
			getById(id)
				.then((response: any) => {
					loading.value = false;
					data.form = response.data.data;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		const getTreeSelect = () => {
			getList()
				.then((response: any) => {
					const menu = {
						id: '0',
						name: '顶级菜单',
						children: [],
						parentId: '0',
					};
					const menuList = response.data.data;
					menuList.unshift(menu);
					data.menuTree = menuList;
				})
				.catch(() => { });
		};
		/**
		 * 关闭事件
		 */
		const handleClose = () => {
			resetForm(formRef.value);
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			data.form.id = undefined;
			data.form.permission = '';
			loading.value = false;
			dialog.value = false;
			formEl.resetFields();
		};
		/**
		 * 提交按钮
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					if (data.form.id) {
						//修改
						edit();
					} else {
						//新增
						add();
					}
				}
			});
		};
		/**
		 * 新增
		 */
		const add = () => {
			addObj(data.form)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('新增成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 修改
		 */
		const edit = () => {
			editObj(data.form)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('修改成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};

		return {
			dialog,
			loading,
			formRef,
			defaultProps,
			initForm,
			submitForm,
			handleClose,
			...toRefs(data),
		};
	},
});
</script>

<style lang="scss"></style>
